<script>
  import { languages } from "./stores.js";
  import { beforeUpdate, afterUpdate } from "svelte";
  import { blur } from "svelte/transition";
  import MainNav from "./components/MainNav.svelte";
  import Cv from "./components/Cv.svelte";

  export let data;
  export let langs;

  let cvVisible = false;

  function splitURL() {
    let url = location.href;
    let url1 = url.split("?")[0];
    if (!url1.endsWith(".html") && !url1.endsWith("/")) {
			console.log(url1)
      url1 = url1 + "/";
    }
    return url1;
  }

  function changeLang(e) {
    let stateObject = {};
    let title = "He Yixin's Portfolio";
    let newLang = e.currentTarget.getAttribute("ref");
    let newUrl = `?lang=${newLang}`;
    let url = splitURL();
    history.pushState(stateObject, title, url + newUrl);
    languages.update((n) => (n = newLang));
    console.log($languages);
  }

  function cvClicked(e) {
    cvVisible = !cvVisible;
  }
</script>

<main>
  {#each langs as language}
    {#if language.lang === $languages}
      <button disabled="true">{language.show}</button>
    {:else}
      <button ref={language.lang} on:click={changeLang}>{language.show}</button>
    {/if}
  {/each}
  <MainNav lang={$languages} on:cvClicked={cvClicked} />

  <h1>{data.common.name}作品集</h1>
  <h2>{data.common.enName}'s Portfolio</h2>
  {#if cvVisible === true}
    <div transition:blur={{ delay: 250, duration: 300 }}>
      <Cv data={data[$languages]} />
    </div>
  {/if}
</main>

<style>
  main {
    background: #05121a;
  }
</style>
